<template>
    <div class="login">
        <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>后台管理系统</span>
  </div>
  <el-form  label-width="80px" :model="form" ref="form">
    <el-form-item label="用户名" prop="username" :rules="[
        {required:ture ,message:'请输入用户名',trigger:'blur'},
        {min:4, max:10,message:'长度在4-10位字符之间'}]">
    <el-input v-model="form.username" ></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password" :rules="[
        {required:ture ,message:'请输入密码',trigger:'blur'},
        {min:6, max:12,message:'长度在6-12位字符之间'}]">
    <el-input v-model="form.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
    <el-button type="primary" @click="login('form')">登陆</el-button>
    </el-form-item>
    </el-form>
</el-card>
    
    </div>
</template>
<script>
import {setToken} from '../utils/setToken'
import {login} from '../api/api.js'
    export default{
        data(){
            return{
                form:{
                    username:'',
                    password:''
                }
            }
        },
        methods:{
            login(form){
                this.$refs[form].validate((valid)=>{
                    if(valid){
                        console.log(this.form);
                        // this.service.post('/login',this.form)
                        // .then(res=>{
                        //     if(res.data.status===200){
                        //         setToken('username',res.data.username)
                        //         setToken('token',res.data.token)
                        //         this.$message({message:res.data.message,type:'success'})
                        //         this.$router.push('/home')
                        //     }
                        //    console.log(res);
                        // })
                        login(this.form).then(res=>{
                            if(res.data.status===200){
                                setToken('username',res.data.username)
                                setToken('token',res.data.token)
                                this.$message({message:res.data.message,type:'success'})
                                this.$router.push('/home')
                            }
                           console.log(res);
                        })
                        
                    }
                    else{
                        console.error(this.form);
                    }
                })
            }
        }
        
    }
</script>
<style lang="scss">
    .login{
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: rgb(25, 148, 193);
        .box-card{
            width: 450px;
            margin: 200px auto;
            .el-card__header{
                font-size: 34px;
            }
            .el-button{
                width: 100%;
            }
        }
    }
</style>